<template>

    <div class="sku">
        <transition name="fade">
            <div class="bg" v-show="show">

            </div>
        </transition>
        <transition name="slide">
            <div class="bottom" v-show="show">
                <div class="info">
                    <img class="img" :src="imgH+goods.img" alt="">
                    <div class="con">
                        <div class="price">
                            ￥{{sku.nowPrice}}
                        </div>
                        <div class="stock">
                            <span>库存:  </span><span>{{sku.stock}}件</span>
                        </div>
                        <div class="skuname">
                            <span>已选:  </span>{{skuName}}
                        </div>
                    </div>
                </div>
                <div class="sku-themes">
                    <div class="sku-theme " :key="index" v-for="(theme,index) in goods.skuThemes">
                   <span class="name">
                       {{theme.name}}
                   </span>
                        <div class="items">
                            <div class="item " @click="selectItem(theme.items,index)" :class="{selected:item.selected}" v-for="(item,index) in theme.items" :key="index">
                                {{item.name}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="inp">
                    <span class="name">数量</span>
                    <numinput v-model="quantity"></numinput>
                </div>
                <radiusbtn @click.native="confirm" style="margin-top: 18px"></radiusbtn>
                <span class="iconfont iconcha" @click="hide"></span>
            </div>
        </transition>
    </div>
</template>

<script>
    import numinput from '@/components/base/num-input'
    import radiusbtn from '@/components/base/radius-btn'

    export default {
        mounted() {


        },
        props: {
            goods: Object,
            show: {
                type: Boolean,
                default: false
            }
        },
        created() {

        },
        data() {
            return {
                itemShow: false,
                quantity: 1,

            }
        },
        components: {
            numinput, radiusbtn
        },
        watch: {
            skuShow(val) {
                this.$emit("update:show", val)
            }
        },
        computed: {
            imgH() {
                return process.env.VUE_APP_IMG_DOMAIN
            },
            skuName(){
                let tem = []
                this.goods.skuThemes.forEach(theme=>{
                    theme.items.forEach(item=>{
                        if(item.selected){
                            tem.push(item.name)
                            return
                        }
                    })
                })
                if(tem.length===this.goods.skuThemes.length){
                    let name = ''
                    tem.forEach(t=>{
                        name+=t+"-"
                    })

                    return  name.substr(0,name.length-1)
                }
                return null;
            },
            sku(){
                let tem = this.goods
                if(this.skuName){

                    this.goods.mallSkus.forEach(ms=>{

                       if( ms.name==this.skuName){
                           tem=ms
                       }
                    })
                }
                return tem
            }

        },
        methods: {
            confirm(){
                if(this.skuName&&this.quantity>0){
                    this.hide()
                    this.$emit("confirm",this.skuName,this.quantity)
                }

            },
            selectItem(items,index){
                //先取消所有

                items.forEach(item=>{
                    this.$set(item,"selected",false)
                })
                let item = items[index]
                if(item.selected){
                    this.$set(item,"selected",false)
                }else {
                    this.$set(item,"selected",true)
                }

               // this.$set(item,"selected",true)
               //  console.log(item.selected)
            },
            hide() {
                this.itemShow = false
                this.$emit("update:show", false)
            }
        }
    }
</script>

<style scoped lang="stylus">
    .fade-enter-active, .fade-leave-active
        transition opacity .5s

    .fade-enter, .fade-leave-to
        opacity 0

    .slide-enter-active, .slide-leave-active
        transition all .5s

    .slide-enter, .slide-leave-to
        transform: translateY(100%)

    .sku
        z-index 1

        .bg
            z-index 1
            position fixed
            top 0
            right 0
            left 0
            bottom 0
            height 100%
            background-color rgba(79, 78, 78, 0.48)

        .bottom
            z-index 2
            left 0
            right 0
            bottom 0
            background-color white
            padding 0 10px 15px
            position fixed

            .iconcha
                font-size 10px
                color red
                position absolute
                right 15px
                top 15px

            .info
                display flex

                .img
                    border-top-left-radius 5px
                    border-top-right-radius 5px
                    position relative
                    top -20px
                    width 90px
                    height 88px
                    border-radius 5px
                    flex 0 0 90px

                .con
                    padding 15px 0 0 15px

                    .price
                        color: #F7895E
                        font-size 14px
                        line-height 14px

                    .stock
                        color $font-color-deep
                        font-size 11px
                        margin 8px 0
                        line-height 11px

                    .skuname
                        color $font-color-deep
                        font-size 11px

            .sku-themes
                .sku-theme
                    font-size 0
                    margin-bottom 20px

                    .name
                        color $font-color-deep
                        font-size 11px

                    .items

                        margin-top 8px
                        display flex

                        .item
                            padding 6px 7px
                            font-size 11px
                            color #6F6F6F
                            background-color #E2E1E1
                            line-height 11px
                            border-radius 7.5px
                            margin-right 10px
                            border 1Px solid  #E2E1E1
                            &.selected
                                color #F7895E
                                background-color #FBDFD1
                                border 1Px solid  #F7895E

            .inp
                margin-top 16px
                font-size 0

                .name
                    margin-bottom 11px
                    display block
                    color $font-color-deep
                    font-size 11px


</style>
